<template>
  <!-- antd的table -->
  <div>
    <fc-title title="决策表-一维">
      <template v-slot:exctor>
        <a-space>
          <a-button type="danger" @click="deletFeature">
            <a-icon type="file-delete" />删除因子列
          </a-button>
          <a-button type="primary" @click="addFeature()">
            <a-icon type="file-add" />添加因子列
          </a-button>
        </a-space>
      </template>
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="false"
        :row-key="record => record.key"
      >
        <template slot="up_dowm" slot-scope="text, record,index, scope, columnDef">
          <span v-if="[0, 1].includes(index)">{{ text }}</span>
          <a-input placeholder="请输入" v-else></a-input>
        </template>
        <template slot="feature" slot-scope="text, record, scope, columnDef">
          <editable-cell
            :text="text"
            :record="{ columnDef, res: record, index:scope }"
            @changeValue="changeSelect"
            @change="onCellChange(record.key, scope, $event, text, columnDef)"
          />
        </template>
        <template slot="selectData" slot-scope="text, record, scope, columnDef">
          <editable-cell
            :text="text"
            :isSelectChage="true"
            :enumsOptions="enumsOptions"
            :record="{ columnDef, res: record, index:scope }"
            @changeValue="changeSelect"
            @change="onCellChange(record.key, scope, $event, text, columnDef)"
          />
        </template>
        <template slot="operation" slot-scope="text, record,index">
          <a-popconfirm
            v-if="![0, 1].includes(index)"
            title="你确定要删除这条数据?"
            ok-text="是"
            cancel-text="否"
            @confirm="deleteRow(record)"
          >
            <a href="#">删除</a>
          </a-popconfirm>
          <!-- <a-button v-if="![0, 1].includes(index)" type="link" @click="deleteRow(record)">删除</a-button> -->
        </template>
      </a-table>
      <a-button type="primary" icon="plus-circle" block @click="addRow">添加</a-button>
    </fc-title>
    <a-modal
      v-model="addFeatureVisible"
      title="删除因子"
      :footer="false"
      :closable="true"
      @ok="handleOk"
    >
      <template v-for="(item,index) in columns">
        <a-popconfirm
          v-if="index < columns.length - 3"
          title="你确定要删除这条数据?"
          ok-text="是"
          cancel-text="否"
          @confirm="deleteColumns(item.dataIndex)"
        >
          <a-tag>{{ item.title }}</a-tag>
        </a-popconfirm>
      </template>
    </a-modal>
  </div>
</template>
<script>
import FcTitle from './FcTitle.vue'
import EditableCell from './EditableCell'
import { getFactorList } from './api/ruleApi'
import enums from './api/enums.json'
const featureColumn = [
  {
    title: 'Id',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '因子代码',
    dataIndex: 'featureCode',
    key: 'featureCode',
  },
  {
    title: '因子名称',
    dataIndex: 'featureName',
    key: 'featureName',
  },
  {
    title: '因子描述',
    dataIndex: 'desc',
    key: 'desc',
  },
]

const defultColumn = [
  {
    title: '自主系数',
    dataIndex: `down`,
    key: 'down',
    scopedSlots: { customRender: 'up_dowm' },
  },
  {
    title: '自主系数',
    dataIndex: `up`,
    key: 'up',
    scopedSlots: { customRender: 'up_dowm' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    scopedSlots: { customRender: 'operation' },
  },
]

const defaultData = [
  {
    id: '_name',
    feature1: 'A1001',
    feature2: 'A1002',
    feature3: 'A1003',
    up: '自主定价系数下限',
    down: '自主定价系数上限',
  },
  {
    id: '_type',
    feature1: 'equal',
    feature2: 'notEqual',
    feature3: 'domain',
    up: '',
    down: '',
  },
  {
    id: `feator_1`,
    feature1: 0,
    feature2: 1,
    feature3: '(50,60]',
    up: '',
    down: '',
  },
  {
    id: `feator_2`,
    feature1: 1,
    feature2: 1,
    feature3: '(0,20]',
    up: '',
    down: '',
  },
  {
    id: `feator_3`,
    feature1: 1,
    feature2: 3,
    feature3: '(20,30]',
    up: '',
    down: '',
  },
  {
    id: `feator_4`,
    feature1: 0,
    feature2: 2,
    feature3: '(40,50]',
    up: '',
    down: '',
  },
]

const defaultEnums = {
  feature1: [
    {
      value: 1,
      label: '男',
    },
    {
      value: 0,
      label: '女',
    },
  ],
  feature2: [
    {
      value: 1,
      label: '个人客服',
    },
    {
      value: 2,
      label: '企业客服',
    },
    {
      value: 3,
      label: '重要客服',
    },
  ],
}
export default {
  props: [],
  data() {
    return {
      addFeatureVisible: false,
      selectedFeatures: [],
      selectedItems: [],
      selectedRowKeys: [],
      featureColumn,
      featureData: [],
      columns: [...defultColumn],
      data: [...defaultData],
      featureIndex: 1,
      rowIndex: 5,
      enumsOptions: { ...defaultEnums },
      columnKey: ['feature1', 'feature2', 'feature3'],
    }
  },
  components: {
    FcTitle,
    EditableCell,
  },
  created() {
    Array.from({ length: 3 }).forEach((_, index) => {
      if (index === 2) {
        this.columns.splice(this.columns.length - 3, 0, {
          title: `因子${this.featureIndex}`,
          dataIndex: `feature${this.featureIndex}`,
          key: `feature${this.featureIndex}`,
          width: 200,
          scopedSlots: { customRender: 'feature' },
        })
      } else {
        this.columns.splice(this.columns.length - 3, 0, {
          title: `因子${this.featureIndex}`,
          dataIndex: `feature${this.featureIndex}`,
          key: `feature${this.featureIndex}`,
          width: 200,
          scopedSlots: { customRender: 'selectData' },
        })
      }
      this.featureIndex++
    })
  },
  computed: {},
  methods: {
    // 删除
    deleteColumns(e) {
      this.columns = this.columns.filter((item) => item.dataIndex !== e)
    },

    deletFeature() {
      this.addFeatureVisible = true
    },

    changeSelect({ enumCode, dataIndex }) {
      if (enumCode) {
        this.columns.forEach((item) => {
          if (item.dataIndex === dataIndex) {
            item.scopedSlots = { customRender: 'selectData' }
          }
        })
        this.enumsOptions = {
          ...this.enumsOptions,
          [dataIndex]: enums[enumCode].values,
        }
      } else {
        this.columns.forEach((item) => {
          if (item.dataIndex === dataIndex) {
            item.scopedSlots = { customRender: 'feature' }
          }
        })
      }
      this.data = this.data.map((item, index) => {
        if (index > 1) {
          return {
            ...item,
            [dataIndex]: '',
          }
        }
        return item
      })
      console.log('=====', this.enumsOptions, this.data)
    },

    // 获取因子
    getAllFeatures: function() {
      this.featureData = getFactorList().map((item, index) => ({
        ...item,
        id: String(index + 1),
        featureCode: item.code,
        featureName: item.label,
      }))
    },

    // 添加行
    addRow() {
      this.data.push({ id: `feator_${this.rowIndex++}` })
    },

    // 删除一行数据
    deleteRow(record) {
      console.log('record', record, this.data)
      this.data = this.data.filter((item) => item.id !== record.id)
    },

    // 表格编辑
    onCellChange: function(index, rowIndex, newValue, oldValue, columnDef) {
      const column = columnDef.dataIndex
      this.data[rowIndex][column] = newValue
    },

    // 添加因子
    addFeature() {
      // 在倒数第三个里旁边加数据
      this.createColumns()
    },
    // 选择因子
    onSelectChange(selected) {
      console.log('selectedRowKeys changed:', selected)
      this.selectedRowKeys = selected
    },
    // 生成表结构
    createColumns: function() {
      this.columns.splice(this.columns.length - 3, 0, {
        title: `因子${this.featureIndex}`,
        dataIndex: `feature${this.featureIndex}`,
        key: `feature${this.featureIndex}`,
        width: 200,
        scopedSlots: { customRender: 'feature' },
      })
      this.featureIndex++
    },
    // 生成表因子结构
    createFeatureColumns: function() {
      let dataObj = {}
      this.selectedItems.forEach((item, index) => {
        dataObj = { ...dataObj, [item.id]: item.name }
      })
      Array.from({ length: 2 }).forEach((_, index) => {
        if (index === 0) {
          dataObj = { ...dataObj, [`自主系数${index}`]: `自主系数下线` }
        } else {
          dataObj = { ...dataObj, [`自主系数${index}`]: `自主系数上线` }
        }
      })
      this.data = [dataObj]
    },
    // 确认
    handleOk: function(e) {
      this.addFeatureVisible = false
      this.columns = this.column
    },
  },
}
</script>
<style lang="css" scoped>
::v-deep .ant-table-tbody {
  background-color: white;
}
</style>
